import { defineStore } from 'pinia'
// import { acceptHMRUpdate, defineStore } from 'pinia'
type Todos = { text: string; id: number; isFinished: boolean }

export const todos = defineStore(
  'todos',
  //   ① 使用options API模式定义
  // {
  // 官网例子(https://pinia.vuejs.org/introduction.html#a-more-realistic-example)
  //   state: () => ({
  //     todos: [],
  //     filter: 'all',
  //     nextId: 0,
  //   }),
  //   getters: {
  //     finishedTodos(state) {
  //       return state.todos.filter((u) => u.isFinished)
  //     },
  //   },
  //   //   $pathch === $dispatch
  //   actions: {
  //     addTodo(text: string) {
  //       this.todos.push({ text, id: this.nextId++, inFinished: false })
  //     },
  //   },
  // }
  //   ② 使用setup模式定义
  //    推荐方式二 因为不知道在方式一中怎么定义ts类型
  () => {
    const todos: Todos[] = reactive([])
    // let nextId = ref<number>(0)
    let nextId: number = 0
    let isFinished: boolean = false
    const addTodo = (text: string) => {
      todos.push({ text, id: nextId++, isFinished: false })
    }
    return {
      todos,
      addTodo,
    }
  }
)
